iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
1
Modern Web

前端UI軍火庫系列 第 11

[Day 11]FontAwesome - 最受歡迎的Icon Font - 超豐富圖示字型

  • 分享至 

  • xImage
  •  

FontAwesome可以說是目前最受歡迎的Icon Font(也就是把icon圖示放到字體使用) css library,具有豐富的圖示(675+)可用,也有許多實用的API,因此在前端界可以說是無人不知無人不曉(什麼?你不知道?那你現在可以跟上潮流了XD)。在最近的FontAwesome5的募資甚至突破了100萬美金!由此可見其巨大的影響力。今天就來簡單介紹一下FontAwesome吧。

Why Icon Font

首先,先談談為何要使用FontAwesome這類的Icon Font,個人覺得有兩個主要的好處:

  1. 避免管理一堆圖片檔
  2. 使用字體的設計方式,可以自由/無限的放大也不會失真
  3. 同上,由於使用字體的方式,也可以很輕鬆的改變icon的顏色

當然,也不是沒有缺點,最主要的一個缺點就是我們可能用不到這麼多的icons,卻必須載入整個字體檔才可以使用,無形中造成頻寬的浪費。

不過以現代的頻寬來說這不算是個大問題,字體檔+CSS檔通常也不會太大,加上可以搭配CDN使用,因此大部分的icon需求以Icon Font來解決還是非常好的!

使用FontAwesome

要使用FontAwesome也非常簡單,只要載入相關的CSS檔後,加入<i class="fa fa-*"></i>就可以了,至於fa-*的部分可以參考FontAwesome的icon清單,圖示的名稱也非常語意化,例如我需要一個藍芽的圖示,可以使用以下HTML

<i class="fa fa-bluetooth"></i>

就可以在頁面上加入藍芽的圖示了,超簡單的啦!

進階功能

除了基本的使用icon以外,FontAwesome也提供了不少helper class,讓你的icon使用上更得心應手,以下介紹幾個常用的helper class

放大圖示

我們可以使用fa-lgfa-2xfa-3xfa-4xfa-5x來直接讓icon放到33%到500%

<div><i class="fa fa-camera-retro"></i> 原始大小</div>
<div><i class="fa fa-camera-retro fa-lg"></i> 33%</div>
<div><i class="fa fa-camera-retro fa-2x"></i> fa-2x</div>
<div><i class="fa fa-camera-retro fa-3x"></i> fa-3x</div>
<div><i class="fa fa-camera-retro fa-4x"></i> fa-4x</div>
<div><i class="fa fa-camera-retro fa-5x"></i> fa-5x</div>

http://ithelp.ithome.com.tw/upload/images/20161211/20020617FQWOHvngee.png

固定寬度

FontAwesome裡的每個icon預設寬度都不一樣,因此若使用以下HTML

<div><i class="fa fa-tree"></i> Tree</div>
<div><i class="fa fa-tags"></i> Tags</div>
<div><i class="fa fa-spoon"></i> Spoon</div>
<div><i class="fa fa-wifi"></i> WiFi</div>

會發現到因為每個icon寬度不一樣的關係,導致希望以清單的方式顯示時很不美觀,這時候可以加上fa-fw這個class,就可以讓icon的寬度都一致囉

<div><i class="fa fa-fw fa-tree"></i> Tree</div>
<div><i class="fa fa-fw fa-tags"></i> Tags</div>
<div><i class="fa fa-fw fa-spoon"></i> Spoon</div>
<div><i class="fa fa-fw fa-wifi"></i> WiFi</div>

http://ithelp.ithome.com.tw/upload/images/20161211/20020617JC8sQhiOPc.png

旋轉動畫效果

旋轉動畫效果很適合當作loading的圖示使用,我們可以加上fa-spin來讓icon旋轉,注意旋轉效果只有fa-spinnerfa-circle-o-notchfa-refresfa-cog有效。

  <div><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
  <div><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></div>
  <div><i class="fa fa-refresh fa-spin fa-3x fa-fw"></i></div>
  <div><i class="fa fa-cog fa-spin fa-3x fa-fw"></i></div>

另外也可以使用fa-pulse,讓icon分成八個影格旋轉。

https://az787680.vo.msecnd.net/user/wellwind/a5466167-b381-4d22-bc83-fd0f085c6670/1481440318_70494.gif

堆疊效果

我們可以透過fa-stack來發揮無限創意將icons堆疊起來變成另外一種樣式的icon,例如把相機跟危險符號堆疊起來,再加上點顏色調整,看起來就像禁止拍照的icon了!

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

其他...

其他hlper class以及更多詳細的範例都可以在官方的examples中看到。

今天的程式碼: https://jsfiddle.net/wellwind/2qc8zyjq/

透過FontAwesome,在需要icons的時候就不用到處請人畫啦!(除非找不到滿意的icon)

類似資源

  • WeatherIcons:一款專門以天氣相關的icon為訴求所產生的library,包含了222+種icon,除了天氣icons以外,還有時鐘、方位等等icons可以使用。
  • IonIcons:從知名的App框架Ionic擷取出來的icons,也有數百種的icons可以選擇,由於本來就是為了打造mobile ui而製作的icon,因此非常適合拿來製作web ui。
  • Themify Icons:具有320+種icon可以使用,icon的線條都比較細,喜歡這種風格icon的可以參考看看。
  • Material Icons: Google官方遵循Material Design所設計出來的icons,喜歡Material Design風格的朋友可以使用款icon font;也有提供svg和png格式下載。若只需要特定幾個icons,還可以節省點空間。

文章同步發表於: https://dotblogs.com.tw/wellwind/2016/12/11/front-end-font-awesome

不正經閒聊

有了Icon Font,打造UI介面變得超容易,而且考試都得一百分呢!


上一篇
[Day 10]jquery.qrcode.js - 只靠前端也能產生QRCode
下一篇
[Day 12]toastr.js - 美化你的通知訊息
系列文
前端UI軍火庫31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言